<template>
  <div class="formContent">
    <div class="header clearfix">
      <span class="title">工单进度报表</span>
      <el-radio-group v-model="tableParams.type" size="mini" @change="handleRadioChange">
        <el-radio-button :label="1">未开始</el-radio-button>
        <el-radio-button :label="2">执行中</el-radio-button>
        <el-radio-button :label="3">3天内到期</el-radio-button>
        <el-radio-button :label="4">超期未完工</el-radio-button>
        <el-radio-button :label="5">本月超期完成</el-radio-button>
        <el-radio-button :label="6">今日完成</el-radio-button>
        <el-radio-button :label="7">本月完成</el-radio-button>
      </el-radio-group>
    </div>
    <el-table :data="tableData" border style="width: 100%" max-height="369" @sort-change="handleSortChange"
      :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
      :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}" v-loading="scheduleLoading" element-loading-text="加载中"
      element-loading-background="rgba(250, 250, 250, 0.5)" element-loading-spinner="el-icon-loading"
      @cell-click='cellClick'>
      <el-table-column label="序号" fixed>
        <template slot-scope="scope">
          <span>{{(tableParams.page - 1) * (tableParams.limit) + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="工单编号" sortable='custom' width="130" fixed>
        <template slot-scope="scope">
          <div class="status">
            <span :title="scope.row.workOrderCode" :style="{color:computedColor(scope.row.woState)}">{{scope.row.workOrderCode}}</span>
            <span v-if="scope.row.isDelay == 1">延期</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="生产进度" width="600">
        <template slot-scope="scope">
          <code class="progress">
            <div class="item_progress" v-for="(k,ind) in scope.row.list" :key="ind">
              <div class="progress_circle">
                <el-tooltip placement="bottom">
                  <div slot="content">已报工良品数：{{k.goodProductNumber}}；工序计划数：{{k.planedNumber}}</div>
                  <el-progress type="circle" :percentage="k.rate || 0" :status="customStatus(k.rate)" :stroke-width="8">
                  </el-progress>
                </el-tooltip>
                <div class="line" v-if="ind != scope.row.list.length - 1" :class="customClass(scope.row.workOrderState,k.rate)">
                </div>
              </div>
              <span :title="k.processName">{{k.processName}}</span>
            </div>
          </code>
        </template>
      </el-table-column>
      <el-table-column prop="productCode" label="产品编号" sortable='custom' width="130" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="productName" label="产品名称" sortable='custom' width="130">
      </el-table-column>
      <el-table-column prop="productSpecification" label="产品规格" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="unit" label="单位">
      </el-table-column>
      <el-table-column prop="workOrderState" label="状态" sortable='custom'>
      </el-table-column>
      <el-table-column prop="startTime" label="计划开始时间" width="150" sortable='custom'>
      </el-table-column>
      <el-table-column prop="endTime" label="计划结束时间" width="150" sortable='custom'>
      </el-table-column>
      <el-table-column prop="planedNumber" label="计划数">
      </el-table-column>
      <el-table-column prop="sjs" label="实际数">
      </el-table-column>
      <el-table-column prop="goodProductNumber" label="良品数">
      </el-table-column>
      <el-table-column prop="badProductNumber" label="不良品数">
      </el-table-column>
      <el-table-column prop="createName" label="创建人">
      </el-table-column>
      <el-table-column prop="editName" label="修改人">
      </el-table-column>
      <el-table-column prop="actualStartTime" label="实际开始时间" width="150" sortable='custom'>
      </el-table-column>
      <el-table-column prop="actualEndTime" label="实际结束时间" width="150" sortable='custom'>
      </el-table-column>
      <el-table-column prop="comment" label="备注" width="100" show-overflow-tooltip>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" style="margin-left:10px"
            @click="btnSet('s',{id:scope.row.id,state:scope.row.woState})">开始
          </el-button>
          <el-button type="text" size="small" @click="btnSet('r',{id:scope.row.id,state:scope.row.woState})">撤回
          </el-button>
          <el-button type="text" size="small" @click="btnSet('e',{id:scope.row.id,state:scope.row.woState})">结束
          </el-button>
          <el-popconfirm placement='top' confirm-button-text='确定' title="工单取消将无法恢复，是否继续"
            @confirm="btnSet('c',{id:scope.row.id})">

            <el-button slot="reference" type="text" size="small" style="margin-left:10px">取消</el-button>
          </el-popconfirm>
          <el-button type="text" size="small" @click="copy(scope.row.id,scope.row.woState,scope.row.workOrderCode)" style="margin-left:10px">复制</el-button>
          <el-popconfirm placement='top' confirm-button-text='删除' @confirm="confirmDel(scope.row.id)" title="确认删除工单？
                            操作将同时删除关联的任务和报工，删除后不可恢复">
            <el-button slot="reference" type="text" size="small" style="margin-left:10px">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
      <div slot="empty">
        <el-empty :image-size="100"></el-empty>
      </div>
    </el-table>
    <el-pagination background layout="total,prev, pager, next" :total="total" @current-change="handleCurrentChange"
      :page-size='tableParams.limit' v-show="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
  import {
    schedule
  } from '@/api/homeController'
  import {
    workOrderDel,
    workOrderHandle
  } from '@/api/produceController'
  export default {
    data() {
      return {
        tableData: [],
        scheduleLoading: false,
        total: 0,
        enumState: {
            0: 'rgb(255,153,0)',
            1: 'rgb(2, 185, 128)',
            2: 'rgb(24, 145, 255)',
            3: 'rgb(255, 59, 48)'
        }
      }
    },
    props: {
      tableParams: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {
      computedColor() {
          return state => {
              return this.enumState[state]
          }
      }
    },
    methods: {
      customClass(state, rate) {
          if (state == 0) {
              return 'no_start'
          } else if (rate == 100) {
              return 're_c'
          } else if (rate >= 0 && rate < 100) {
              return 'no_c'
          }
      },
      customStatus(rate){
        if(rate == 100) return 'success'
      },
      handleSortChange({
        order,
        prop
      }) {},
      //工单进度报表
      getSchedule(data) {
        this.scheduleLoading = true
        schedule(data).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
          this.scheduleLoading = false
        })
      },
      //工单操作
      getWorkOrderHandle(data, tit) {
        workOrderHandle(data, tit).then(res => {
          if (res.code == 200) {
            this.getSchedule(this.tableParams)
            this.utils.showMsg(`${tit}成功`, 'success')
          }
        })
      },
      //工单删除
      getWorkOrderDel(data) {
        workOrderDel(data).then(res => {
          if (res.code == 200) {
            this.getSchedule(this.tableParams)
          }
        })
      },
      //删除
      confirmDel(id) {
        this.getWorkOrderDel({
          id
        })
      },
      //开始--取消--撤回--结束
      btnSet(o, scope) {
        let state
        let tit
        switch (o) {
          case 'r':
            if (scope.state != 1 && scope.state != 2) {
              this.utils.showMsg('撤回失败,工单状态非 [执行中、已结束]', 'error')
              return
            } else {
              if (scope.state == 1) {
                state = 0
              } else if (scope.state == 2) {
                state = 1
              }
              tit = '撤回'
            }
            break;
          case 'e':
            if (scope.state != 0 && scope.state != 1) {
              this.utils.showMsg('结束失败,工单状态非 [执行中、未开始]', 'error')
              return
            } else {
              state = 2
              tit = '结束'
            }
            break;
          case 'c':
            state = 3
            tit = '取消'
            break;
          default:
            if (scope.state != 0) {
              this.utils.showMsg('开始失败,工单状态非 [未开始]', 'error')
              return
            } else {
              state = 1
              tit = '开始'
            }
        }
        this.getWorkOrderHandle({
          id: scope.id,
          state
        }, tit)
      },
      //复制
      copy(id,state,code) {
          this.$router.push({
              path: '/productionManagement/copy',
              query: {
                  id,
                  state,
                  code
              }
          })
      },
      //跳转至工单详情页面
      cellClick(row, column) {
        if (column.label == '工单编号') {
          this.$router.push({
            path: '/productionManagement/edit',
            query: {
              id: row.id,
              code: row.workOrderCode,
              state: row.woState
            }
          })
        }
      },
      //切换radio
      handleRadioChange(val) {
        this.tableParams.type = val
        this.$emit('getRadio', this.tableParams.type)
        this.getSchedule(this.tableParams)
      },
      //页码切换
      handleCurrentChange(currentPage) {
        this.tableParams.page = currentPage
        this.getSchedule(this.tableParams)
      }
    },
    mounted() {
      this.getSchedule(this.tableParams)
    }
  }
</script>

<style lang="less" scoped>
  .formContent {
    height: 100%;
    padding: 24px;

    code{
      font-family: sans-serif;
    }

    .header {
      margin-bottom: 20px;

      .title {
        float: left;
        color: #1f273d;
        font-size: 16px;
      }

      .el-radio-group {
        float: right;
      }
    }

    .status {
      span:nth-of-type(1) {
        width: 78%;
        display: inline-block;
        vertical-align: middle;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #409EFF;
        cursor: pointer;
      }

      span:nth-child(2) {
        display: inline-block;
        width: 28px;
        background-color: rgb(255, 59, 48);
        font-size: 12px;
        text-align: center;
        color: white;
        border-radius: 3px;
      }
    }

    .progress {
      display: flex;

      .item_progress {
        display: flex;
        flex-direction: column;
        .progress_circle {
          display: flex;
          align-items: center;

          .line {
            width: 30px;
            height: 2px;
            background-color: rgb(24, 144, 255);
            margin: 0px 3px;
          }

          .no_c {
            background-color: rgb(24, 144, 255);
          }

          .re_c {
            background-color: #67C23A;
          }

          .no_start{
            background-color: rgb(230, 230, 230);
          }
        }

        span {
          color: #5a5a5a;
          font-size: 12px;
          display: inline-block;
          width: 42px;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: center;
          white-space: nowrap;
        }

        /deep/ .el-progress-circle {
          width: 42px !important;
          height: 42px !important;
        }

        /deep/ .el-progress__text {
          font-size: 10px !important;
        }
      }
    }

    /deep/ th.el-table__cell.gutter {
      background-color: #fafafa;
    }

    /deep/ .el-table th>.cell {
      line-height: 34px;
    }

    /deep/ .el-table .caret-wrapper {
      float: right;
    }
  }
</style>